<template>
  <div class="dateil">
    <!-- 头部组件 -->
    <top-module bgColor="#fff">
      <div slot="left">
        <van-icon name="arrow-left" @click="bb"/>
      </div>
      <div slot="center" class="center_box">
        <ul>
          <li v-for="item in titleList" :key="item.id">{{item.txt}}</li>
        </ul>
      </div>
    </top-module>
    <!-- 商品 -->
    <div class="takeTurns">
      <!-- 轮番、前 -->
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,index) in imgData" :key="index">
          <img :src="item">
        </van-swipe-item>
      </van-swipe>
      <!-- 轮番、后 -->
      <div class="txtDateil">
        <!---标题-->
        <p class="tit">{{title}}</p>
        <p class="price_box">
          <span class="oldPrice">{{oldPrice}}</span><span class="price">{{price}}</span>
        </p>
        <ul class="columns">
          <li v-for="(item,index) in columns" :key="index">{{item}}</li>
        </ul>
      </div>
      <div class="services">
        <ul>
          <li v-for="(item,index) in services" :key="index">
                <img :src="item.icon" alt=""><span>{{item.name}}</span>
          </li>
        </ul>
      </div>
      <!-- 店铺介绍 -->
      <div class="shopInfo">
            <div class="shopLogo_shopName">
                  <div class="shopLogo"><img :src="shopLogo" alt=""></div>
                  <div class="shopName">{{shopName}}</div>
            </div>
            <!-- 描述 -->
            <div class="describe">
                  <div>
                        <ul class="describe_left">
                              <li>
                                  <p class="describe_left_num">{{cFans}}万</p>
                                  <p class="describe_left_txt">总销量</p>
                              </li>
                              <li>
                                  <p class="describe_left_num">{{cGoods}}</p>
                                  <p class="describe_left_txt">全部宝贝</p>  
                              </li>
                        </ul>
                  </div>
                  <div>
                        <ul class="describe_right">
                              <li v-for="(item,index) in score" :key="index">
                                    <span class="scoreName">{{item.name}}</span>
                                    <span class="score" :style="{color:item.isBetter?'red':'#006C01'}">{{item.score}}</span>
                                    <span v-text="item.isBetter?'高':'低'" class="isBetter" :style="{background:item.isBetter?'red':'#006C01'}"></span>
                              </li>
                        </ul>
                  </div>
            </div>
            <!-- 进店逛逛、 -->
            <button class="btn">进店逛逛</button>
            <!-- 商品介绍 -->
            <div class="desc">
                  <span class="span1"></span>
                  <p>{{desc}}</p>
                  <span class="span2"></span>
            </div>
            <!-- 穿着效果 -->
            <div class="detailImage">
                  <p>穿着效果</p>
                  <div v-for="(item,index) in detailImage" :key="index">
                        <img  :src="item" alt="">
                  </div>
            </div>
      </div>
    </div>
    <!-- 参数 -->
    <div class="parameter">
          <p v-for="(item,index) in productInfo" :key="index">
                <span class="parameter_key">{{item.key}}</span>
                <span class="parameter_value">{{item.value}}</span>
          </p>
    </div>
    <!-- 评论 -->
    <div class="discuss">
          <div class="toMore">
                <span>用户评论</span>
                <span>更多  ></span>
          </div>
          <div class="discuss_user">
                  <div class="discuss_img"><img :src="user.avatar" alt=""></div>
                  <div class="discuss_name">{{user.uname}}</div>
            </div>
            <div class="discuss_content"> 
                 <p class="content"> {{content}}</p>
                 <p class="styleData">
                       <span>{{created}}</span>
                       <span>{{styleData}}</span>
                 </p>
            </div>
    </div>
    <!-- 推荐 -->
    <div>
          <hot-push></hot-push>
    </div>
    <!-- 下部定位 -->
    <div class="botton_box">
      <div>
        <ul>
          <li>
            <span class="service"></span>
            <p>客服</p>
          </li>
          <li>
            <span class="store"></span>
            <p>店铺</p>
          </li>
          <li >
            <span class="collect"></span>
            <p>收藏</p>
          </li>
        </ul>
      </div>
      <div>
        <ul>
          <li class="addShop" @click="collect_Vuex(item)">加入购物车</li>
          <li class="buy">购买</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { queryDateilData } from "@/netWork/api/index.js"; //axios
import topModule from "../components/commonality/topModule.vue"; //头部
import HotPush from '../components/hotPush.vue';//热门推荐
export default {
  components: { topModule, HotPush },
  name: "dateil",
  data() {
    return {
      titleList: [
        { txt: "商品", id: 1 },
        { txt: "参数", id: 2 },
        { txt: "评论", id: 3 },
        { txt: "推荐", id: 4 },
      ],
      imgData: [], //轮番图
      title: "", //标题
      oldPrice: "", //原价钱
      price: "", //现价钱
      columns: "", //销售收藏发货
      services: "", //本店有什么服务
      shopLogo:'',//loog
      shopName:'',//店铺名字
      cFans:'',//总销量
      cGoods:'',//商品个数
      score:[],//评分
     desc:'',//商品介绍
     detailImage:[],//穿着效果图片
     productInfo:[],//参数
     user:{},//用户信息
     content:'',//评论内容
     created:'',//评论时间
     styleData:'',//购买的样式
     item:{},
     
    };
  },
  methods: {
    collect_Vuex(item){//存入vuex
      item.num=1
      item.Select = false
      let _arr=this.$store.state.shopList
      let _index=-1
      _arr.forEach((itemVuex,index) => {
        if(itemVuex.iid==item.iid){
          _index=index
        }
      });

      if(_index==-1){
        _arr.push(item)
      }else{
        _arr.splice(_index,1,item)
      }

      this.$store.commit('gteDateilData',_arr)
    },
    bb(){
      this.$router.back(-1)
    },
    queryDateillist(id) {
      queryDateilData(id).then((res) => {
        // console.log(res.data.result);
        this.imgData = res.data.result.itemInfo.topImages; //轮番
        this.title = res.data.result.itemInfo.title; //标题
        this.oldPrice = res.data.result.itemInfo.oldPrice; //原价钱
        this.price = res.data.result.itemInfo.price; //现价钱
        this.columns = res.data.result.columns; //销量收藏发货
        this.services = res.data.result.shopInfo.services; //本店有什么服务
        this.shopLogo=res.data.result.shopInfo.shopLogo//logo
        this.shopName=res.data.result.shopInfo.name//店面
        this.cFans=res.data.result.shopInfo.cFans//总销量
        this.cGoods=res.data.result.shopInfo.cGoods//全部商品
        this.score=res.data.result.shopInfo.score//评分
        this.desc=res.data.result.detailInfo.desc//商品介绍
        this.detailImage=res.data.result.detailInfo.detailImage[0].list//穿着效果
        this.productInfo=res.data.result.itemParams.info.set//参数
        this.user=res.data.result.rate.list[0].user//用户信息
        this.content=res.data.result.rate.list[0].content//评论内容
        this.created=res.data.result.rate.list[0].created//评论时间
        this.styleData=res.data.result.rate.list[0].style//购买的样式

      });
    },
  },
  mounted() {
    this.queryDateillist("1lqxuvu");
    this.item=JSON.parse(this.$route.query._obj)
    console.log(this.item);
  },
};
</script>

<style lang="scss" scoped>
.dateil {
  width: 100%;
  font-size: 18px;
  position: relative;
  box-sizing: border-box;
  margin-bottom: 100px;
  .van-icon {
    font-size: 30px;
    line-height: 50px;
  }
  .center_box {
    width: 100%;
    line-height: 50px;
    text-align: center;
    ul {
      display: flex;
      li {
        flex: 1;
      }
    }
  }
  .takeTurns {
    //商品盒子
    box-sizing: border-box;
    margin-top: 50px;
    .van-swipe {//轮番
      height: 320px;
      img {
        width: 100%;
      }
    }
    .txtDateil {//价格什么的
      width: 100%;
      box-sizing: border-box;
      .tit {//标题
        box-sizing: border-box;
        padding: 10px;
      }
      .price_box {//价钱
        padding: 10px;
        .oldPrice {
          font-size: 30px;
          color: #ff478d;
        }
        .price {
          color: rgb(116, 116, 116);
          text-decoration: line-through;
          margin-left: 5px;
        }
      }
      .columns {//销量
        margin: 10px 10px 0 10px;
        padding-bottom: 10px;
        display: flex;
        justify-content: space-between;
        border-bottom: solid 1px #ccc;
        li {
          color: rgb(116, 116, 116);
          font-size: 15px;
          text-align: center;
        }
      }
    }
    .services {//店铺服务
    width: 100%;
    padding: 10px;
    ul{
          display: flex;
           justify-content: space-between;
          li{
                img{
                      width: 15px;
                      vertical-align: middle;
                }
                span{
                      font-size: 13px;
                }
          }
    }
    }
    .shopInfo{//店铺介绍
      width: 100%;
      padding: 10px;
      .shopLogo_shopName{//商店logo
            display: flex;
            height: 100px;
            .shopLogo{
                  flex: 2;
                  img{
                        width: 100%;
                        margin-top: 17px;
                  }
            }
            .shopName{
                  flex: 8;
                  line-height: 100px;
                  font-size: 20px;
                  margin-left: 10px;
                  color: rgb(102, 102, 102);
            }
      }
      .describe{//详情
            width: 100%;
            display: flex;
            div{
                  flex: 1;
                  .describe_left{//总销量商品个数
                        display: flex;
                        padding:0 25px;
                        margin: 25px 0;
                        border-right: solid rgb(129, 129, 129) 1px;
                        li{
                              flex: 1;
                              text-align: center;
                              .describe_left_num{
                                    font-weight: 700;
                                    font-size: 19px;
                              }
                              .describe_left_txt{
                                    font-size: 15px;
                                    color: rgb(102, 102, 102);
                              }
                        }
                  }
                  .describe_right{//评分
                   padding: 10px 20px; 
                        li{
                            font-size: 16px;
                            margin: 8px;
                            .scoreName{
                                  color: rgb(129, 129, 129);
                            }
                            .score{
                                  display: inline-block;
                                  width: 40px;
                                  text-align: center;
                                  font-weight: 700;
                            }
                            .isBetter{
                                   color: #fff;
                                  display: inline-block;
                                  width: 25px;
                                  height: 25px;
                                 text-align: center;
                                 line-height: 25px;
                            }
                        }
                  }
                  //按钮
                  
            }
      }
      .btn{//逛逛按钮
                   border: none;
                   outline: none;
                   background: #eee;
                   text-align: center;
                   padding: 9px 70px;
                   margin-left: 90px;
                   border-radius: 9px;
            }
            .desc{//衣服介绍
                  margin-top: 50px;
                  position: relative;
                  .span1{
                        display: inline-block;
                        width: 40%;
                        // height: 5px;
                        border: 1px solid #000;
                        background: #000;
                  }
                  p{
                        font-size: 16px;
                        color: #555;
                        margin: 15px 0;
                  }
                  .span2{
                        width: 40%;
                        display: inline-block;
                        border: 1px solid #000;
                        background: #000;
                        position: absolute;
                        right: 0;
                  }
            }
            .detailImage{
                  width: 100%;
                  margin-top: 20px;
                  p{
                        font-weight: 700;
                        color: #555;
                  }
                  img{
                        width: 100%;
                  }
            }
    }
  }
//   参数
.parameter{
      width: 100%;
      border-bottom: 1px solid #ccc;
      p{
            padding: 10px 10px;
            .parameter_key{
                  display: inline-block;
                  width: 150px;
            }
            .parameter_value{
                  color: #ff478d;
            }
      }
}
//评论
.discuss{
      width: 100%;
      padding: 10px;
      .toMore{//更多
            display: flex;
            justify-content: space-between;
            padding: 7px 5px;
      }
      .discuss_user{//头像用户名
            display: flex;
            margin: 10px 0;
            .discuss_img{
                  flex: 1;
                  text-align: center;
                  img{
                        width: 90%;
                        border-radius: 50%;
                        
                  }
            }
            .discuss_name{
                  flex: 5;
                  line-height: 60px;
                  font-size: 20px;
                  color: #555;
                  margin-left: 15px;
            }
      }
      .discuss_content{//内容
            margin: 10px;
            .styleData{
                  font-size: 15px;
                  color: #555;
                  padding: 5px 0;
                  span{
                        margin-right: 10px;
                  }
            }
      }
}
  //下部定位
  .botton_box {
        background: #fff;
    width: 100%;
    display: flex;
    position: fixed;
    left: 0;
    bottom: 0;
    height: 60px;
    div {
      flex: 1;
      text-align: center;
      ul {
        display: flex;
        li {
          flex: 1;
          p {
            font-size: 15px;
          }
          span {
            display: inline-block;
            width: 32px;
            height: 32px;
            background: url(/img/detail/detail_bottom.png);
          }
          .service {
            background-position: 0.4px -72px;
            background-size: 97%;
          }
          .store {
            background-position: 0.4px -137px;
            background-size: 97%;
          }
          .collect {
            background-position: 0.4px -35px;
            background-size: 97%;
          }
        }
        .addShop {
          line-height: 60.8px;
          background: #ffe6e8;
          color: #ff478d;
          font-size: 17px;
        }
        .buy {
          line-height: 60.8px;
          background: #ff478d;
          color: #fff;
          font-size: 17px;
        }
      }
    }
  }
}
</style>